<script setup>
import {ref, watch} from "vue";

const props = defineProps({
  image: {
    type: Array,
    default: () => []
  },
  option: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['update:image'])

const checkbox = ref([])
// 透传v-model
const change = () => {
  console.log('checkbox.value',checkbox.value)
  emits('update:image', checkbox.value)
}
watch(() => props.image, (val) => {
  checkbox.value = val || []
}, {
  immediate: true,
  deep: true
})
</script>

<template>
  <el-checkbox-group v-model="checkbox" @change="change">
    <el-checkbox v-for="item in option" style="width: 120px;height: 200px" :label="item.value">
      <el-image style="width: 120px" :src="item.value" />
      <div style="text-align: center;padding-top: 10px">
        {{ item.label }}
      </div>
    </el-checkbox>
  </el-checkbox-group>
</template>

<style scoped lang="scss">
.el-image {
  display: flex;
  align-items: center;
}
</style>